<template>
  <section
    class="basic"
    style="background: url('static/img/aaa.jpg') no-repeat;background-size: cover;"
  >
    <!-- 这部分要居中！ -->
    <el-row style="margin:auto auto">
      <el-col :span="24" style="display:flex">
        <div class="personNumber" style="margin:auto">{{ personNumber }}</div>
      </el-col>
      <el-col :span="8" :offset="8" style="margin-top:2rem;text-align:center">
        <el-button type="success" class="button" @click="begin()">开始</el-button>
        <el-button type="warning" class="button" @click="end()">结束</el-button>
      </el-col>
    </el-row>
  </section>
</template>
<script>
import { getPerson } from "../api/nianhui.js";
export default {
  data() {
    return {
      personNumber: "",
      personArray: [],
      timer: null
    };
  },
  methods: {
    begin() {
      if (this.personArray.length === 0) {
        this.$message.error("无抽奖名单!");
        return false;
      }
      let length = this.personArray.length;
      let _this = this;
      this.timer = setInterval(function() {
        // 产生随机数
        let winner = parseInt(Math.random() * length);
        console.log(winner);
        _this.personNumber = _this.personArray[winner].jobNumber;
      }, 100);
    },
    end() {
      clearInterval(this.timer);
      this.timer = null;
    },
    getData() {
      getPerson().then(res => {
        if (res) {
          this.personNumber = "";
          this.personArray = res.msg;
        } else {
          this.personNumber = "";
          this.personArray = [];
        }
      });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>
<style scoped>
.basic {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  background-size: cover;
}
.personNumber {
  width: 80rem;
  height: 20rem;
  background-color: azure;
  text-align: center;
  line-height: 20rem;
  font-size: 10em;
  border: 0.1em solid #a40000;
  /* fo */
}
.button {
  font-size: 3rem;
}
</style>